import * as THREE from 'three'
import Experience from '../class/Experience';
// import { CSS3DRenderer, CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader.js';
// import stationData from '../data/station'
// import arrow from '../img/arrow.svg'
const svgUrl = './img/arrow2.svg'
export default class Svg {
    constructor() {
        this.experience = new Experience()
        this.group = new THREE.Group()
        this.loader = new SVGLoader();
        this.group.position.y = 2;
        this.loader.load(svgUrl, data => {
            let paths = data.paths;
            this.options = {
                depth: 50,
                bevelThinkness: 1,
                bevelSize: 1,
                bevelSegments: 1,
                bevelEnabled: false,
                curveSegments: 50,
                steps: 1
            }

            // for (let i = 0; i < paths.length; i++) {
            let path = paths[0];
            this.shapes = path.toShapes(true);




            // console.log(svg);
            // console.log(this.experience.group.line.lineGroup.children);
            const lineList = this.experience.group.line.lineGroup.children;
            lineList.forEach(item => {
                const svg = this.createSvg(item.points)
                this.group.add(svg)
            })
            // this.update()
        })
    }

    createSvg(vec3List) {
        const start = vec3List[0]
        let svgGeometry = new THREE.ExtrudeGeometry(this.shapes, this.options);
        const material = new THREE.MeshBasicMaterial({
            color: 0xffffff,
            side: THREE.DoubleSide, //双面可见
        });
        let svg = new THREE.Mesh(svgGeometry, material)
        svg.scale.multiplyScalar(0.05);
        svg.scale.y *= 0.2;
        svg.scale.x *= 0.5;
        svg.rotateX(-Math.PI / 2)
        svg.index = 0
        svg.indexMax = vec3List.length - 1
        svg.points = vec3List;
        svg.position.set(start.x, start.y, start.z)
        return svg
    }


    update() {
        this.group.children.forEach(item => {
            // console.log(item);
            if (item.index > item.indexMax - 2) item.index = 0;
            item.index += 1
            const curPosition = item.points[item.index]
            item.position.set(curPosition.x, curPosition.y, curPosition.z)
            const next = item.points[item.index + 1]
            item.lookAt(next.x, next.y, next.z)
        })
    }
}